<template>
  <el-dialog
    v-model="dialogVisible"
    title=""
    width="900"
    overflow
    @close="handleClose"
  >
    <vxe-table
      border
      min-height="300"
      header-align="center"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="tableData"
      size="small"
    >
      <vxe-column field="" title="自定义付款节点" width="450" />
      <vxe-column field="" title="项目回款完成时间"
        ><template #edit="{ row }">
          <vxe-input
            v-model="row.date12"
            type="date"
            placeholder="请选择日期"
            transfer
          /> </template
      ></vxe-column>
      <vxe-column field="" title="供应商付款完成时间"
        ><template #edit="{ row }">
          <vxe-input
            v-model="row.date12"
            type="date"
            placeholder="请选择日期"
            transfer
          /> </template
      ></vxe-column>
    </vxe-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          color="#1E3485"
          @click="dialogVisible = false"
        >
          保存
        </el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from "vue";
const emit = defineEmits(["close", "confirm"]);
// 弹窗关闭/打开事件
const props = defineProps({
  visible: Boolean
});
function handleClose() {
  emit("close", false);
}
const dialogVisible = ref(false);
const formLabelWidth = "140px";

const tableData = ref([]);

watch(
  () => props.visible,
  val => {
    dialogVisible.value = val;
  },
  { immediate: true }
);
const form = reactive({});
</script>
